<template>
  <template v-if="navbarData && navbarData.length > 0">
    <NavBar :data="navbarData" @click-navbar="onClickNavBar" />
    <template v-if="progressData && progressData.length > 0">
      <ProgressStep
        :data="progressData"
        @click-progress-step="onClickProgressStep"
      />
      <TrainingList
        :course_id="course_id"
        :progress_id="progress_id"
        :course_ku_id="course_ku_id"
      ></TrainingList>
    </template>
    <template v-else>
      <NoData />
    </template>
  </template>
  <NoData v-if="navbarData && navbarData.length == 0" />
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from "vue";
import type {
  CourseSubmitTabItem,
  CourseTrainingItem,
} from "../../../../types/aviation";
import { postCourseSubmitTab, postTraining } from "../../../../api/aviation";
import NavBar from "../a_components/navbar";
import ProgressStep from "./components/ProgressStep.vue";
import TrainingList from "./components/TrainingList.vue";

const navbarData = ref<CourseSubmitTabItem[]>();
const course_id = ref();
const course_ku_id = ref();

// 获取navbar数据
const getNavbarDataData = async () => {
  let res = await postCourseSubmitTab();
  if (res.code === 200) {
    let data = res.data || [];
    data = data.map((item) => {
      return {
        ...item,
        title: item.course_ku_title,
      };
    });
    navbarData.value = data;
    if (navbarData.value.length > 0) {
      course_id.value = res.data[0].course_id;
      course_ku_id.value = res.data[0].course_ku_id;
      getTrainingData();
    }
  }
};

getNavbarDataData();

// 点击navbar 查询阶段数据
const onClickNavBar = ({ item }) => {
  course_id.value = item.course_id;
  course_ku_id.value = item.course_ku_id;
  // 重置数据状态
  progressActiveIndex.value = 0;
  progressData.value = [];
  progress_id.value = "";
  getTrainingData();
};

const progressData = ref<CourseTrainingItem[]>();
const progress_id = ref();
const progressActiveIndex = ref(0);
const getTrainingData = async () => {
  let res = await postTraining(course_id.value);
  if (res.code === 200) {
    progressData.value = res.data || [];
    if (progressData.value.length == 0) {
      progress_id.value = "";
      return;
    }
    progress_id.value = res.data[progressActiveIndex.value]?.id || "";
  }
};
// 点击progress
const onClickProgressStep = ({ item, index }) => {
  progressActiveIndex.value = index;
  progress_id.value = item.id;
};

provide("Parmas", {
  course_id: course_id.value,
  course_ku_id: course_ku_id.value,
  progress_id: progress_id.value,
});
</script>
<style scoped lang="less"></style>
